<template>
  <el-dialog
    width="25%"
    :visible="addVisible"
    :before-close="handleClose"
    @open="openAddDialog"
  >
    <p>创建新收藏夹</p>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-position="right">
      <el-form-item prop="name">
        <el-input v-model="form.name" placeholder="收藏夹标题" />
      </el-form-item>
      <el-form-item prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          placeholder="收藏夹描述"
        />
      </el-form-item>
      <el-form-item prop="publicFlag">
        <el-radio-group v-model="form.publicFlag">
          <el-radio :label="true" style="margin-bottom: 10px">
            公开 (有其他人关注此收藏夹时不可设置为私密)
          </el-radio>
          <el-radio :label="false"  >
            隐私 (只有你自己可以查看这个收藏夹)
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveFavorite">创建</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import favorite from '@/api/favorite'
export default {
  name: 'AddFavorite',
  props: {
    addVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        name: '',
        description: '',
        publicFlag: true
      },
      rules: {
        name: [
          { required: true, message: '请输入收藏夹名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 每次打开的时候将数据清空
    openAddDialog() {
      this.form = {
        name: '',
        description: '',
        publicFlag: true
      }
    },
    handleClose() {
      const detailVue = this.$parent.$parent
      detailVue.changeVisible(true, false)
    },
    saveFavorite() {
      debugger
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          favorite.edit(this.form).then(resp => {
            this.$message({
              type: 'success',
              showClose: true,
              message: resp.message
            })
            this.handleClose()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
